<template>
	<view class="content1 padding">
		<block v-for="(item, index) in couponsInfo" :key="index">
			<view
				class="coupon bg-img flex flex-direction"
				:class="item.is_use == 1 ? 'isUse' : 'is'"
				@click="item.is_use == 1 ? used() : jump(item)"
			>
				<view class="flex align-center " style="height: 240rpx;">
					<image
						:src="item.image"
						mode="aspectFill"
						class="radius bg-white margin-left"
						style="width: 160rpx; height: 160rpx;"
					></image>
					<view class="flex flex-direction margin-left">
						<text class="text-df">{{ item.name }}</text>
						<text
							class="text-price text-bold"
							style="color: #F8CE39; font-size: 70rpx;"
						>
							{{ item.price }}
						</text>
					</view>
				</view>
				<view class="flex align-center padding-left">
					<text style="color: #666666;">{{ item.usage_time }}</text>
				</view>
				<view
					class="immediately flex flex-direction align-center justify-center"
					v-if="item.is_use == 0"
				>
					<text>立</text>
					<text>即</text>
					<text>使</text>
					<text>用</text>
				</view>
			</view>
		</block>
		<shopro-modal v-model="showModal" style="z-index: 88;">
			<block slot="modalContent">
				<view class="modal-box">
					<view class="modal-head">
						<image
							class="modal-head-img"
							src="http://shopro.7wpp.com/imgs/modal_bg.png"
							mode=""
						></image>
						<text class="modal-head-title">核销</text>
					</view>
					<input
						class="inp"
						type="number"
						v-model="user_code"
						placeholder="请输入核销码"
						placeholder-class="pl-inp"
					/>

					<button class="cu-btn post-btn" @tap="postMoney">确认核销</button>
				</view>
				
			</block>
		</shopro-modal>
		<u-toast ref="uToast" />
		<view class="WxEmojiView" v-if="0">
			<view class="add padding-xs " @click="showModal = true">
				<view class="cuIcon-profile1">核销优惠券</view>
			</view>
		</view>
		<image
			v-if="!couponsInfo.length"
			src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dataIsEmpty.png"
			mode="aspectFill"
			class="emptyIcon "
		></image>
	</view>
</template>

<script>
const app = getApp();
import shoproModal from '../../components/shopro-modal/shopro-modal.vue';
export default {
	components: {
		shoproModal
	},
	data() {
		return {
			couponsInfo: [],
			showModal: false,
			verificationCd: '',
			user_code: '',
			page: 1,
			limit: 10,
			total: ''
		};
	},
	onShow() {this.getCoupons();},
	onLoad() {
		
	},
	onReachBottom() {
		this.page++;
		if (this.couponsInfo.length == this.total) {
			 this.$refs.uToast.show({ title: '暂无更多优惠券~~', type: 'error' });
		}else {
			this.getCoupons();
		}
			
		
	},
	methods: {
		getCoupons() {
			var that = this;
			app.globalData.api
				.getPersonnalCoupon(this.page, this.limit, { couponDate: '' })
				.then(res => {
					console.log("res: ",res);
					that.total = res.total;
					that.couponsInfo = [...that.couponsInfo, ...res.rows];
					console.log("that.couponsInfo: ",that.couponsInfo);
				});
		},

		used() {
			this.$refs.uToast.show({ title: '已使用此优惠券, 无法再次使用', type: 'error' });
		},

		jump(item) {
			///pages/user-center/mine
			uni.navigateTo({
				url: 'mine?user_code=' + item.user_code +'&id='+item.id
			});
		},
		postMoney() {
			if (!this.user_code)
				return this.$refs.uToast.show({ title: '请输入核销码~~', type: 'error' });
                app.globalData.api.checkCoupon({ userCode: this.user_code }).then(res => {
				if (res.code == 200) {
					console.log('res: ', res);
					app.globalData.api.useCoupon({ userCode: this.user_code }).then(ress => {
						console.log('ress: ', ress);
						this.$refs.uToast.show({ title: '核销成功~~', type: 'success' });

						[this.showModal, this.user_code] = [false, ''];
						[this.couponsInfo ,this.page ]=[[] ,1   ]
						this.getCoupons();
					});
				} else {
					this.$refs.uToast.show({ title: '无法进行核销~~', type: 'error' });
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		// margin: 60rpx auto 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
		margin-top: 30rpx;
	}
}
.content1 {
	@keyframes test3 {
		from {
			box-shadow: 0rpx 0rpx 5rpx red;
		}

		to {
			box-shadow: 0rpx 0rpx 30rpx red;
		}
	}

	/deep/.add {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 0;
		bottom: 180rpx;
		// width: 80rpx;
		// height: 80rpx;
		background: #f8ce39;
		box-shadow: 0rpx 2rpx 11rpx 0rpx rgba(210, 164, 0, 0.53);
		opacity: 0.8;
		border-radius: 33rpx 0rpx 0rpx 33rpx;
		color: #fffff2;
		font-size: 30rpx;
		animation: test3 2s ease-in-out infinite alternate;
		z-index: 66;
	}
	.isUse {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%BB%84%206@2x.png);
	}
	.is {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/coupon.png);
	}
	.coupon {
		position: relative;
		height: 290rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		.immediately {
			position: absolute;
			top: 0;
			right: 0;
			//transform: translateY(-50%);
			width: 125rpx;
			height: 240rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
}
</style>
